<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Video Player</title>
    <style>
        .video-player {
    max-width: 640px;
    margin: 0 auto;
}

.video {
    width: 100%;
}

.controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.controls button,
.controls input {
    margin: 0 5px;
}

    </style>
</head>
<body>
    <div class="video-player">
        <video class="video" controls>
            <source src="./爱要坦荡荡-萧潇.mp3" type="">
            Your browser does not support the video tag.
        </video>
        <div class="controls">
            <button class="play-pause">Play</button>
            <input type="range" class="seek-bar" value="0">
            <button class="mute">Mute</button>
            <input type="range" class="volume-bar" min="0" max="1" step="0.1" value="1">
        </div>
    </div>

    <script >
        const video = document.querySelector('.video');
const playPauseButton = document.querySelector('.play-pause');
const seekBar = document.querySelector('.seek-bar');
const muteButton = document.querySelector('.mute');
const volumeBar = document.querySelector('.volume-bar');

function togglePlayPause() {
    if (video.paused) {
        video.play();
        playPauseButton.textContent = 'Pause';
    } else {
        video.pause();
        playPauseButton.textContent = 'Play';
    }
}

function updateSeekBar() {
    seekBar.value = (video.currentTime / video.duration) * 100;
}

function updateVideoTime() {
    video.currentTime = (seekBar.value * video.duration) / 100;
}

function toggleMute() {
    if (video.muted) {
        video.muted = false;
        muteButton.textContent = 'Mute';
    } else {
        video.muted = true;
        muteButton.textContent = 'Unmute';
    }
}

function updateVolume() {
    video.volume = volumeBar.value;
}

playPauseButton.addEventListener('click', togglePlayPause);
video.addEventListener('timeupdate', updateSeekBar);
seekBar.addEventListener('input', updateVideoTime);
muteButton.addEventListener('click', toggleMute);
volumeBar.addEventListener('input', updateVolume);

    </script>
</body>
</html>
